<template>
	<view class="container">
		<uni-nav-bar
		fixed="true"
		color="#ffffff"
		:border="false"
		left-icon="back"
		@clickLeft="back"
		background-color="rgba(0, 0, 0, 0)"
		:status-bar="true"
		:title="successInfor[paymentType-1].title"  />
		<image src="/static/success.png" class="bg"></image>
		<view class="content">
			<view class="top-wrapper">
				<image src="/static/success-icon.png" mode="aspectFill" class="icon"></image>
				<view class="text">
					<view class="title">{{successInfor[paymentType-1].title}}</view>
					<view class="desc">{{successInfor[paymentType-1].desc}}</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="infor-wrapper">
				<view class="amount border-bottom" v-if="Number(createOrderDetails.totalFee)>0">
					<text class="small">¥</text>{{createOrderDetails.totalFee}}
				</view>
				<view class="amount border-bottom" v-else>
					{{createOrderDetails.productName}}
				</view>
				<view class="infor-list">
					<view class="infor-item">
						<view class="titl">订单编号：</view>
						<view class="con">{{createOrderDetails.orderNo}}</view>
					</view>
					<view class="infor-item">
						<view class="titl" v-if="successInfor.type != 2">下单时间：</view>
						<view class="titl" v-if="successInfor.type == 2">兑换时间：</view>
						<view class="con">{{createOrderDetails.createTime}}</view>
					</view>
					<view class="infor-item" v-if="createOrderDetails.payMethod">
						<view class="titl">支付方式：</view>
						<view class="con" v-if="createOrderDetails.payMethod== 1">余额支付</view>
						<view class="con" v-if="createOrderDetails.payMethod== 2">微信支付</view>
						<view class="con" v-if="createOrderDetails.payMethod== 3">支付宝支付</view>
					</view>
					<view class="infor-item"v-if="successInfor.type == 2">
						<view class="titl">消费积分：</view>
						<view class="con">{{createOrderDetails.score}}积分</view>
					</view>
					<view class="infor-item"v-if="successInfor.type == 3">
						<view class="titl">赠送积分：</view>
						<view class="con">{{createOrderDetails.getScore}}积分</view>
					</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<template v-for="info in successInfor">
					<view class="btn" v-if="info.type == paymentType" @click="nextPage(info.path)" :key="info.type">{{info.btnText}}</view>
				</template>
				<view class="btn on" @click="home">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {uniNavBar},
		data() {
			return {
				paymentType: '', // 1支付2积分3充值
				createOrderDetails: {},
				successInfor: [
					{
						type: 1,
						title: '支付成功',
						desc: '感谢您的购买',
						btnText: '查看订单',
						path: '/pages/order/index'
					},
					{
						type: 2,
						title: '兑换成功',
						desc: '感谢您的兑换',
						btnText: '积分商城',
						path: '/pages/integral/index'
					},
					{
						type: 3,
						title: '支付成功',
						desc: '感谢您的充值',
						btnText: '查看余额',
						path: '/pages/user/index'
					}
				]
			}
		},
		onLoad(option) {
			const {createOrderDetails, paymentType} = option
			this.createOrderDetails = JSON.parse(decodeURIComponent(createOrderDetails))
			this.paymentType = paymentType
		},
		methods: {
			nextPage(url) {
				uni.reLaunch({
					url
				})
			},
			back() {
				uni.navigateBack()
			},
			home() {
				// uni.redirectTo({
				// 	url: '/pages/index/index'
				// });
				uni.navigateBack({
					delta: 2
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-navbar__placeholder{
		display: none !important;
	}
	.bg{
		width: 100%;
		height: 533rpx;
	}
	.top-wrapper{
		position: relative;
		margin-top: -347rpx;
		font-size: 0;
		text-align: center;
		.icon{
			display: inline-block;
			vertical-align: middle;
			width: 118rpx;
			height: 118rpx;
		}
		.text{
			display: inline-block;
			vertical-align: middle;
			padding-top: 15rpx;
			margin-left: 34rpx;
			text-align: left;
			.title{
				line-height: 48rpx;
				font-size: 38rpx;
				color: #fff;
			}
			.desc{
				margin-top: 6rpx;
				line-height: 38rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
	.line{
		position: relative;
		margin: 85rpx auto 0;
		width: 660rpx;
		height: 24rpx;
		background: #C43B07;
		border-radius: 11rpx;
	}
	.infor-wrapper{
		position: relative;
		margin: -10rpx auto 0;
		width: 625rpx;
		overflow: hidden;
		box-shadow: 0 14rpx 26rpx 0px rgba(237, 96, 43, 0.13);
		&::after{
			content: " ";
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 20rpx;
			background: linear-gradient(180deg, #ED602B 0%, rgba(240, 138, 52, 0) 100%);
			opacity: 0.6;
		}
		.amount{
			position: relative;
			padding: 45rpx 0 31rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 60rpx;
			background: #FFFFFF;
			color: #333333;
			.small{
				font-size: 38rpx;
			}
			&::after{
				left: 8rpx;
				right: 8rpx;
			}
		}
		.infor-list{
			position: relative;
			padding: 35rpx 0 32rpx;
			background: #FFFFFF;
			&::after{
				content: " ";
				position: absolute;
				left: -10rpx;
				top: 4rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #F5F5F5;
			}
			&::before{
				content: " ";
				position: absolute;
				right: -10rpx;
				top: 4rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #F5F5F5;
			}
			.infor-item{
				display: flex;
				padding: 10rpx 20rpx 10rpx 29rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				.titl{
					color: #999999;
				}
				.con{
					color: #333333;
				}
			}
		}
	}
	.btn-wrapper{
		display: flex;
		justify-content: space-between;
		margin: 109rpx 101rpx 0;
		.btn{
			width: 240rpx;
			height: 90rpx;
			box-sizing: border-box;
			line-height: 90rpx;
			font-size: 32rpx;
			text-align: center;
			border: 1px solid #EA5D2E;
			border-radius: 45rpx;
			color: #EA5D2E;
			&.on{
				border: none;
				color: #fff;
				background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
			}
		}
	}
</style>
